<!--学生登录后 我的课程 -->
<template>
	<view style="margin: 20px;">
		<view class="warp">
			<uni-section class="mb-10" title="我的课程" type="line" titleFontSize="18px">
			</uni-section>
			<uni-grid :column="2" :square="false" :highlight="false" :showBorder="false">
				<uni-grid-item v-for="(item, index) in list" :index="index" :key="index" style="border-radius: 50%;">
					<view @click="toCourseInformation(item.id)" class="grid-item-box">
						<!-- //数组循环出图片 -->
						<image src="../../static/img/1.png" class="image" mode="aspectFill"/>
						<text class="text">{{ item.schoolMajor.name }}</text>
						<text class="text">{{ item.name }}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: Array,
				type: ''
			}
		},
		methods: {
			// 请求接口,获取学生课程
			
			// 对应课程详情
			async choicenessDetails() {
				// console.log("choicenessDetails")
				let that = this;
				const myCourseData = await that.$myRequest({
					url:'/api/mobile/schoolStudentCourse/CoursesForStudent',
				})
				console.log(myCourseData)
				if(myCourseData.success){
					that.list = myCourseData.data
					console.log("type:"+that.list)
				}else{
					uni.showToast({
						title:myCourseData.msg
					})
				}
				console.log(myCourseData);
			},
			toCourseInformation(id) {
				console.log(id)
				uni.navigateTo({
					url: '../courseInformation/courseInformation?id='+id
				})
			},
		},
		onShow() {
			this.choicenessDetails();
		}
	}
</script>

<style>
uni-page-body {
		/* background-color: #55ffff; */
		padding-bottom: 10px
	}

	.image {
		width: 7.4em;
		height: 110px;
		border: .1px solid #d4d4d4;
		border-radius: 10px
	}
	.text {
		font-size: 14px;
		margin-top: 5px;
		font-weight: bolder;
		/* padding: 0 20rpx; */
		color: #414141;
		text-align: center;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		// display: block;
		/* #endif */
	}

	.grid-dynamic-box {
		margin-bottom: 15px;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		padding: 15px 0;
		background-color: #e2e2e2;
		margin: 8px 10px;
		border-radius: 10px;
		box-shadow: 4px 4px 2px rgba(212, 212, 212, 0.9);
		border: .1px solid #d4d4d4;
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-dot {
		position: absolute;
		top: 5px;
		right: 15px;
	}

	.swiper {
		height: 420px;
	}

	/* #ifdef H5 */
	@media screen and (min-width: 768px) and (max-width: 1425px) {
		.swiper {
			height: 630px;
		}
	}

	@media screen and (min-width: 1425px) {
		.swiper {
			height: 830px;
		}
	}

	/* #endif */
</style>
